<template>
    <div class="container">
        <!-- 导航栏区域开始 -->
        <TridentNavBar>
            <template #left><i class="iconfont icon-zuojiantou"></i></template>
            <template #default>黑名单</template>
        </TridentNavBar>
        <!-- 导航栏区域结束 -->

        <!-- 搜索区域开始 -->
        <van-search
            v-model="params.username"
            show-action
            placeholder="搜索"
            class="search-wrap"
        >
            <template #action>
                <div @click="handleSearch">搜索</div>
            </template>
        </van-search>
        <!-- 搜索区域结束 -->

        <!-- 列表区域开始 -->
        <div class="content-wrap">
            <van-pull-refresh
                v-model="refreshing"
                @refresh="onRefresh"
                style="min-height: calc(100vh - 100px);"
            >
                <van-list
                    v-model:loading="loading"
                    :finished="finished"
                    :finished-text="totalPage > 1 ? '没有更多了' : ''"
                    @load="getBlacklist"
                    offset="50"
                    class="list-wrap"
                >
                    <!-- 骨架屏区域 -->
                    <div class="skeleton-item" v-for="(index) in 8" :key="index" v-if="isSkeleton">
                        <van-skeleton>
                            <template #template>
                                <div class="skeleton-box">
                                    <div class="item">
                                        <van-skeleton-paragraph style="width: 60px;height: 60px;border-radius: 5px;margin-right: 10px;"/>
                                        <div class="right">
                                            <van-skeleton-paragraph row-width="20%" style="height: 25px;"/>
                                            <van-skeleton-paragraph row-width="25%" style="height: 45px;"/>
                                        </div>
                                    </div>
                                </div>
                            </template>
                        </van-skeleton>
                    </div>

                    <template v-if="blacklist.length > 0">
                        <div class="black-item" v-for="(item, index) in blacklist" :key="index">
                            <div class="left">
                                <van-image
                                    width="50"
                                    height="50"
                                    :src="global.MINIO_FILE_DOMAIN + item.info.avatar_url"
                                    fit="contain"
                                />
                            </div>
                            <div class="right">
                                <div>{{ item.info.username }}</div>
                                <div class="btn" @click="handleCancelBlack(item)">取消拉黑</div>
                            </div>
                        </div>
                    </template>
                    <template v-else>
                        <TridentEmpty v-if="!loading" />
                    </template>

                    <!-- 返回顶部 -->
                    <van-back-top bottom="100" right="10"><i class="iconfont icon-top" style="font-size: 30px;"></i></van-back-top>
                </van-list>
            </van-pull-refresh>
        </div>
        <!-- 列表区域结束 -->

    </div>
</template>

<script lang="ts" setup>
import { reqBlacklistFriendAPI, reqFriendListAPI } from '@/apis/friend'
import type { Friend, FriendListParams } from '@/types/friend'
import { showSuccessToast } from 'vant'
import { inject, ref } from 'vue'

// ----------------- 定义全局变量开始 -----------------
// 全局属性
const global: any = inject('global')

// 骨架屏
const isSkeleton = ref<boolean>(false)

// 参数
const params = ref<FriendListParams>({
    username: '',
    status: '-1',
    is_my_friend: 1,
    is_friend_info: 1,
    page: 1,
    page_size: 10
})
// ----------------- 定义全局变量结束 -----------------



// ----------------- 定义搜索功能开始 -----------------
const handleSearch = async () => {
    blacklist.value = []
    params.value.page = 1

    // 当加载完成设置为false,将会自动调用getMessageList()方法获取数据
    // 但是第一页数据需要手动getMessageList()
    finished.value = false

    // 当获取第一页数据的时候需要手动调用接口
    // 非第一页数据则无需手动调用接口,会自动调用接口
    if (params.value.page == 1) {
        await getBlacklist()
    }
}
// ----------------- 定义搜索功能结束 -----------------



// ----------------- 下拉刷新功能开始 -----------------
const refreshing = ref<boolean>(false)
const onRefresh = async () => {
    // 清空列表数据
    finished.value = false

    // 将 loading 设置为 true，表示处于加载状态
    loading.value = true

    params.value.page = 1

    await getBlacklist()
}
// ----------------- 下拉刷新功能结束 -----------------



// ----------------- 定义列表功能开始 -----------------
// 加载中
const loading = ref(false)

// 完成
const finished = ref(false)

// 黑名单列表
const blacklist = ref<Friend[]>([])

// 总条数
const total = ref<number>(0)

// 总页数
const totalPage = ref<number>(0)

// 获取黑名单
const getBlacklist = async () => {
    isSkeleton.value = true
    if (refreshing.value) {
        blacklist.value = []
        refreshing.value = false
    }

    loading.value = true

    const result = await reqFriendListAPI(params.value)
    blacklist.value.push(...result.data.friends)
    total.value = result.data.total
    totalPage.value = result.data.total_page

    if (params.value.page as never < result.data.total_page) {
        params.value.page++
    } else {
        finished.value = true
    }

    loading.value = false
    isSkeleton.value = false
}
// ----------------- 定义列表功能结束 -----------------



// ----------------- 定义取消拉黑开始 -----------------
const handleCancelBlack = async (friend: Friend) => {
    const result = await reqBlacklistFriendAPI({
        ids: friend.id + '',
        status: 1
    })

    const index = blacklist.value.findIndex(item => item.id == friend.id)
    blacklist.value.splice(index, 1)

    showSuccessToast(result.message)
}
// ----------------- 定义取消拉黑结束 -----------------
</script>

<style scoped lang="scss">
::v-deep(.van-skeleton) {
    padding: 0px 0px;
}

page,
.container {
    height: 100vh;

    // 搜索区域开始
    .search-wrap {
        position: fixed;
        width: 100%;
        top: 45px;
        left: 0;
        right: 0;
        z-index: 100;
    }
    // 搜索区域结束

    // 列表区域开始
    .content-wrap {
        padding-top: 100px;
        .list-wrap {
            padding: 0 10px;
            .black-item {
                background-color: #fff;
                padding: 10px;
                margin-top: 5px;

                display: flex;
                align-items: center;

                .left {
                    width: 60px;
                    height: 60px;
                    border: 1px solid #c5c5c5;
                    border-radius: 5px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
                .right {
                    flex: 1;
                    margin-left: 10px;

                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    .btn {
                        background-color: #27BA9B;
                        font-size: 13px;
                        color: #fff;
                        height: 50px;
                        line-height: 50px;
                        width: 70px;
                        text-align: center;
                    }
                }
            }

            .skeleton-item {
                background-color: #fff;
                margin-top: 5px;
                .skeleton-box {
                    padding: 10px;
                    width: 100%;
                    .item {
                        display: flex;
                        align-items: center;
                        padding-bottom: 6px;
                        .right {
                            flex: 1;
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                        }
                    }
                }
            }
        }
    }
}
</style>